<template>
	<div class="g-bd">
		<div class="g-row">
			<div id="j-categoryList">
				<div>
					<div>
						<div class="m-hd">
							<div class="m-itemCateListHd">
								<div class="m-topSearchIpt ipt">
									<i class="icon"></i>
									<span class="placeholder">搜索商品, 共9800款好物
									</span>
								</div>
							</div>
						</div>
					</div>
					<div class="m-cateNavVertWrap" style="left:0;">
						<div style="position:relative;height:100%;width:100%;overflow:hidden;">
							<ul id="j-cateNav" class="m-cateNavVert">
								<li class="item" v-for="item in cateList">
									<a class="txt" href="javascript:;" @click="chooseCate(item.id)">{{item.name}}</a>
								</li>
							</ul>
						</div>
					</div>
					<div class="m-subCateList">
						<!-- <div class="banner" style="background-image:url(http://yanxuan.nosdn.127.net/f6520714a4067019c0dc9c3bcbb924ed.jpg?imageView&amp;thumbnail=0x196&amp;quality=75);">
							<div class="cnt"></div>
						</div> -->
						<div class="cateList">
							<!-- <div class="hd">
								<span class="text">
									<span>居家</span>
									<span>分类</span>
								</span>
							</div> -->
							<div v-for="(value, key) in cateContent" :key='key'>
								<ul v-show="cateId == key" class="list">
									<li class="cateItem" v-for="item in value" :key="item.id">
										<router-link :to="{path: '/list', query: {id:key, pid:item.pid}}">
											<!-- <div class="cateImgWrapper">
												<img src="http://yanxuan.nosdn.127.net/d77f8cd37529d4fc10932aaf708663bc.png?imageView&amp;quality=85&amp;thumbnail=144x144" alt="" class="cateImg">
											</div> -->
											<div class="name">{{item.name}}</div>
										</router-link>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<nav class="m-tabBar">
						<a class="item" href="/">
							<i name="tabBar-index" class="u-icon u-icon-tabBar-index"></i>
							<span class="txt">首页</span>
						</a>
						<a class="item" href="/topic/index">
							<i name="tabBar-topic" class="u-icon u-icon-tabBar-topic"></i>
							<span class="txt">识物</span>
						</a>
						<a class="item active" href="/item/cateList?categoryId=1005000">
							<i name="tabBar-cate" class="u-icon u-icon-tabBar-cate"></i>
							<span class="txt">分类</span>
						</a>
						<a class="item" href="/cart">
							<i name="tabBar-cart" class="u-icon u-icon-tabBar-cart"></i>
							<span class="txt">购物车</span>
						</a>
						<a class="item" href="/ucenter">
							<i name="tabBar-ucenter" class="u-icon u-icon-tabBar-ucenter"></i>
							<span class="txt">个人</span>
						</a>
					</nav>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import '@/assets/less/category.less'

	export default {
		name: 'index',
		data() {
			return {
				cateData: '',
				cateList:[],
				cateContent: {},
				cateId: '',
			}
		},
		mounted() {
			this.getCategory () 
		},
		methods: {
			chooseCate(id) {
				this.cateId = id;
				console.log(this.cateId)
			},
			getCategory() {
				// api.getCategory().then(res => {
					this.cateData = {
						"status": 0,
						"data": [
							{
							"id": 1,
							"name": "男士",
							"pid": 0
							},
							{
							"id": 2,
							"name": "女士",
							"pid": 0
							},
							{
							"id": 10,
							"name": "百货",
							"pid": 0
							},
							{
							"id": 11,
							"name": "裙子",
							"pid": 1
							},
							{
							"id": 12,
							"name": "长裤",
							"pid": 1
							},
							{
							"id": 13,
							"name": "鞋子",
							"pid": 1
							},
							{
							"id": 14,
							"name": "帽子",
							"pid": 2
							},
							{
							"id": 15,
							"name": "风扇",
							"pid": 10
							},
							{
							"id": 16,
							"name": "测试",
							"pid": 2
							}
						],
						"message": ""
					}

					if(this.cateData.status == 0) {

						this.cateData.data.forEach(item => {
							if(item.pid == 0) {
								if(!this.cateContent[item.id]) {
									this.cateContent[item.id] = []
								}
								this.cateList.push({id:item.id, name: item.name})
							} else {
								if(!this.cateContent[item.pid]) {
									this.cateContent[item.pid] = []
								}
								this.cateContent[item.pid].push({pid: item.pid, name: item.name})
							}
						})
						window.sessionStorage.setItem('cateContent', JSON.stringify(this.cateContent))
					}
				// })
			}
		}
	}
</script>
